Destructuring Props in Functional Components

When you pass any props to any componenet, as in this example passing name and age as props to Profile component

<Profile name="John Doe" age={30} />

then you can use destructuring to directly extract name and age from the props object in the Profile component.

It makes the code cleaner and more readable by avoiding repetitive props.name and props.age references.

const Profile = ({ name, age }) => (
  <div>
    <h1>{name}</h1>
    <p>Age: {age}</p>
  </div>
);

You Might Also Like

Custom Hook : Simplify Code with Reusable Logic

Setting up a reusable data-fetching function to simplify API calls and state management. # State In...

Learn More
Labels: Names used to label loops and control flow

``` outerLoop: for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (j === 1) {...

Learn More